<template>
	<view class="question-index">
		<!-- <image class="top-bg" :src="bg"></image> -->
		<view class="content">
			<view class="user">
				<image class="avatar" :src="dataObj.avatar || dataObj.avatarDefault"></image>
				<span class="name ellipsis-1">{{dataObj.nickname || '-'}}</span>
			</view>
			<view class="title">{{dataObj.title}}</view>
			<!-- <view class="tips">
				当前做题科目
				<span class="change">切换</span>
			</view> -->
		</view>
		<view class="block">
			<view class="b-title">请选择练习方式</view>
			<view class="item sequence" @click="onTestTap(item, 1)">顺序练习</view>
			<view class="item random" @click="onTestTap(item, 2)">随机练习</view>
			<view class="item wrong" @click="onTestTap(item, 3)">错题练习</view>
			<!-- <view class="item video" @click="onVideoTap(item)">查看相关视频</view> -->
			<view class="btn" @click="onExamTap(item)">进入考试</view>
		</view>
	</view>
</template>

<script>
	import avatarDefault from '@/static/images/user/avatar-default.png';
	import { requestErrorTip } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				dataObj: {
					id: '',
					title: '',
					nickname: '',
					avatar: '',
					avatarDefault: avatarDefault,
				}
			}
		},
		onLoad(event) {
			const title = event['title']; // 获取试题名称
			this.dataObj['title'] = title;
			this.dataObj['id'] = event['id']; // 获取试题id
			uni.setNavigationBarTitle({
			　　title: title
			});
			this.getData(); // 获取数据
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 练习
			onTestTap(item, type) {
				uni.navigateTo({
					url: './test?id=' + this.dataObj['id'] + '&type=' + type + '&title=' + this.dataObj['title']
				});
			},
			// 考试
			onExamTap(item) {
				uni.navigateTo({
					url: './entryExam?id=' + this.dataObj['id'] + '&title=' + this.dataObj['title']
				});
			},
			// 获取数据
			getData() {
				// 从缓存中获取
				const userInfo = uni.getStorageSync('userInfo');
				this.dataObj['nickname'] = userInfo['nickname'];
				this.dataObj['avatar'] = userInfo['avatar'];
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.question-index{
		box-sizing: border-box;
		padding: 0 36rpx;
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 100% 400rpx;
		background-image: url('../../static/images/question/bg.png');
		.top-bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 400rpx;
			// z-index: -1;
		}
		.content{
			position: relative;
			padding-top: 60rpx;
			// height: 314rpx;
			.user{
				margin-bottom: 28rpx;
				.avatar{
					display: inline-block;
					width: 56rpx;
					height: 56rpx;
					margin-right: 18rpx;
					border-radius: 50%;
					vertical-align: middle;
				}
				.name{
					line-height: 56rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					vertical-align: middle;
				}
			}
			.title{
				line-height: 66rpx;
				font-size: 48rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 4rpx;
			}
			.tips{
				line-height: 36rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				margin-bottom: 65rpx;
				.change{
					position: relative;
					padding-right: 36rpx;
					&::after{
						content: '';
						position: absolute;
						width: 36rpx;
						height: 36rpx;
						background-position: center right;
						background-repeat: no-repeat;
						background-size: 26rpx;
						background-image: url(../../static/images/question/change.png);
					}
				}
			}
		}
		.block{
			position: relative;
			.b-title{
				line-height: 52rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #1A1A1A;
				margin-bottom: 48rpx;
			}
			.item{
				position: relative;
				height: 108rpx;
				line-height: 108rpx;
				font-size: 30rpx;
				color: #1A1A1A;
				background: #F7F7F7;
				border-radius: 7rpx;
				margin-bottom: 18rpx;
				padding: 0 60rpx 0 98rpx;
				&::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 98rpx;
					height: 108rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 44rpx 44rpx;
				}
				&::after{
					content: '';
					position: absolute;
					top: 0;
					right: 30rpx;
					width: 30rpx;
					height: 108rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 30rpx 30rpx;
					background-image: url(../../static/images/common/arrow-right.png);
				}
			}
			.sequence{
				&::before{
					background-image: url(../../static/images/question/sequence.png);
				}
			}
			.random{
				&::before{
					background-image: url(../../static/images/question/random.png);
				}
			}
			.wrong{
				&::before{
					background-image: url(../../static/images/question/wrong.png);
				}
			}
			.video{
				&::before{
					background-image: url(../../static/images/question/video.png);
				}
			}
			.btn{
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				border-radius: 45rpx;
				background-color: #1BB682;
				margin: 60rpx 0 30rpx;
			}
		}
	}
</style>
